/* eslint-disable */
import React from "react";
import {Form, Input, Cascader, Button, message,BackTop} from "antd";

import axios from "axios";
import qs from "qs";

import Head from "./../Public/Head";

import TopImg from "../../assets/images/banner-text2-cn.png";
import minidosesimg1 from "../../assets/images/mini-doses-detail-1.png";
import minidosesimg2 from "../../assets/images/mini-doses-detail-2.png";
import minidosesimg3 from "../../assets/images/mini-doses-detail-3.png";
import minidosesimg4 from "../../assets/images/mini-doses-detail-4.png";


import "./../../view/Index/Index.less";


class Index extends React.Component {
	constructor(props) {
		//创建组件时必须执行的方法，构造方法
		super();
		// console.log(props);
		// this.name = "tom"
		this.state = {
			keyword       : "",
			classification: "",
			options       : [
				{
					value   : "zhejiang",
					label   : "Zhejiang",
					children: [
						{
							value   : "hangzhou",
							label   : "Hangzhou",
							children: [
								{
									value: "xihu",
									label: "West Lake",
								},
							],
						},
					],
				},
			],
			imgs          : ["minidosesimg1", "minidosesimg2", "minidosesimg3", "minidosesimg4"],
		};
	}

	componentWillMount() {
		let UserInfo = sessionStorage.getItem("UserInfo");
		// console.log("没有登陆", UserInfo);
		if (!UserInfo) {
			this.props.history.push("/login");
			// console.log("没有登陆", UserInfo);
		}
	}

	handleSubmit = (e) => {
		e.preventDefault();
		// console.log(this.state);
		let {classification, keyword} = this.state;


	};
	AccountInput = (type, e) => {
		if (type == "classification") {
			var data = {
				classification: e.target.value,
			};
		} else {
			var data = {
				keyword: e.target.value,
			};
		}
		this.setState(data);
	};

	onChange = (value) => {
		console.log(value);
	};

	leftimgs(items) {

		// const numbers = [1, 2, 3, 4, 5]
		// const items = numbers.map((number)=>(<li>{ number }</li>))
		// console.log(items)
		// return (<ul>{ items }</ul>)

		var h = items.map((item, key) => {
			return (
				<div key={key} className="w-100 mb-10px">
					{/*{item}*/}
					<img src={require("../../assets/images/mini-doses-detail-1.png")} className="w-100" alt=""/>
					{/*<img key={key} src={item} className="w-100" alt=""/>*/}
				</div>
			);
		});
		return (h);

		// return items.forEach((item,k) => {
		// 	console.log(item)
		// 	 (
		// 		<div className="w-100 mb-10px">
		// 			6666
		// 		</div>
		// 	);
		// });
	};


	render() {
		return (
			<div className="w-100" style={{BackgroundColor: "#f6f6f6"}}>
				<BackTop/>
				<Head></Head>
				<div className="w-1200 border">
					<div className="mt-30px mb-30px"><img src={TopImg} alt="" height="350"/></div>
					<div className="w-100 d-flex justify-content-between align-items-start">
						<div className="border" style={{width: "880px"}}>
							<div className="w-100 bg-fff pt-20px pb-20px pl-20px pr-20px d-flex">
								<div className="w-300px">
									<div className="w-100">关键词</div>
									<div className="w-100 mt-5px">
										<Input placeholder="请输入" type="text" onChange={this.AccountInput.bind(this, "keyword")} onPressEnter={this.handleSubmit.bind(this)} className="w-100"/>
									</div>
								</div>
								<div className="w-300px ml-30px">
									<div className="w-100">分类</div>
									<div className="w-100 mt-5px">
										<Cascader className="w-100" options={this.state.options} onChange={this.onChange.bind(this)} placeholder="Please select"/>
										{/*<Input placeholder="请输入" type="text" onChange={this.AccountInput.bind(this, "classification")} onPressEnter={this.handleSubmit.bind(this)} className="w-100" />*/}
									</div>
								</div>
								<div onClick={() => {
									this.setState({
										classification: "",
										keyword       : "",
									});
									console.log(this.state);
								}} className="w-300px ml-30px d-flex align-items-center justify-content-end cursor">
									重置
								</div>
							</div>

							<div className="w-100 mt-20px border bg-fff">
								<div className="pt-30px pb-30px fw size-16 pl-20px">MiniDoses List</div>
								<div className="border w-100"></div>
							</div>
						</div>
						<div className="w-300px">
							<div className="w-100 mb-20px">
								<img src={minidosesimg1} className="w-100" alt=""/>
							</div>

							<div className="w-100 mb-20px">
								<img src={minidosesimg2} className="w-100" alt=""/>
							</div>

							<div className="w-100 mb-20px">
								<img src={minidosesimg3} className="w-100" alt=""/>
							</div>

							<div className="w-100 mb-20px">
								<img src={minidosesimg4} className="w-100" alt=""/>
							</div>

							<div className="w-100 mb-20px">
								<img src={minidosesimg4} className="w-100" alt=""/>
							</div>

							{/*<img className="w-100" src="https://tailoredscript.com.cn/img/hero.jpg" alt=""/>*/}

						</div>
					</div>
				</div>
			</div>
		);
	}


}

export default Index;
